<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>四月栈-分类</title>
    <div th:replace="_fragments::basicrefrence"></div>
    <meta name="description" content="本页面按分类展示博客">
</head>


<!--网页主体-->
<body>

    <!--网页头-->
    <nav th:replace="_fragments::guesthead"></nav>



    <div class="m-tenDistance">
        <div class="ui container" style="align-self: center" id="mainDiv">

        </div>
    </div>


    <!--网站页脚-->
    <footer th:replace="_fragments::guestfoot"></footer>




</body>

<script type="text/javascript">

    var mainDiv = $('#mainDiv');
    var typeList = [];
    var currentPage = 1;
    var typeIdPage = null;

    function getPageInfo(next, typeId) {
        $.ajax({
            url:"/getBlogPageInType",
            data:{
                page: currentPage,
                next: next,
                typeId: typeIdPage
            },
            success:function (resp) {
                if (resp.code === 0) {
                    return;
                }
                currentPage = resp.data;
            }
        });
    }

    function listBlogInType(page,next,typeId) {
        $.ajax({
            url:"getBlogByType",
            data:{
                page:page,
                next:next,
                typeId:typeId
            },
            type:"get",
            success:function (resp) {
                if (resp.code === 0) {
                    return;
                }
                let blogList = resp.data;
                mainDiv.append("<div class=\"ui attached segment \">\n" +
                    "                <div class=\"ui two column grid\">\n" +
                    "                    <div class=\"column\">\n" +
                    "                        <h3 class=\"ui teal header\">分类</h3>\n" +
                    "                    </div>\n" +
                    "                    <div class=\"right aligned column\">\n" +
                    "                        <span style=\"font-size: 20px\" class=\"item\">共 "+blogList.length+" 个</span>\n" +
                    "                    </div>\n" +
                    "                </div>\n" +
                    "            </div>");
                for (let blog of blogList) {
                    let blogCreateDate = new Date(blog.updateDate);
                    mainDiv.append("<div class=\"ui attached segment m-padding-lr\">\n" +
                        "                <div class=\"ui mobile reversed stackable grid\">\n" +
                        "                    <div class=\"eleven wide column\">\n" +
                        "                        <a href=\"/blog?d="+blog.id+"\"><span  class=\"ui header m-title\">"+blog.title+"</span></a><br/>\n" +
                        "                        <a href=\"/blog?id="+blog.id+"\" class=\"m-abstract\" >"+blog.tip+"</a>\n" +
                        "\n" +
                        "                        <div class=\"ui grid\">\n" +
                        "                            <div class=\"twelve wide column\">\n" +
                        "                                <div class=\"ui mini horizontal list\">\n" +
                        "                                    <div class=\"item\">\n" +
                        "                                        <img src=\"images/MyHead.jpg\" class=\"ui avatar image\">\n" +
                        "                                        <span class=\"content\">\n" +
                        "                                            <a href=\"/about\">syyrjx</a>\n" +
                        "                                        </span>\n" +
                        "                                    </div>\n" +
                        "                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n" +
                        "                                    <div class=\"item\">\n" +
                        "                                        <i class=\"calendar icon\"></i>\n" +
                        "                                        <span class=\"label\">" +
                        blogCreateDate.getFullYear() + "-" + (blogCreateDate.getMonth()+1) + "-" + blogCreateDate.getDate() +
                        "</span>\n" +
                        "                                    </div>\n" +
                        "                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n" +
                        "                                    <div class=\"item\">\n" +
                        "                                        <i class=\"eye icon\"></i>\n" +
                        "                                        <span class=\"label\">"+blog.view+"</span>\n" +
                        "                                    </div>\n" +
                        "                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;\n" +
                        "                                    <div class=\"item\">\n" +
                        "                                        <i class=\"comment outline icon\"></i>\n" +
                        "                                        <span class=\"label\" >"+blog.commentNum+"</span>\n" +
                        "                                    </div>\n" +
                        "                                </div>\n" +
                        "                            </div>\n" +
                        "                            <!--标签-->\n" +
                        "                            <div class=\"right aligned four wide column\">\n" +
                        "                                <a href=\"#\" class=\"ui orange basic label\">"+(blog.tag==1?'原创':'搬运')+"</a>\n" +
                        "                            </div>\n" +
                        "                        </div>\n" +
                        "                    </div>\n" +
                        "\n" +
                        "                    <div class=\"five wide column\">\n" +
                        "                        <a href=\"/blog?id="+blog.id+"\" target=\"_blank\">\n" +
                        "                            <img src=\""+blog.picture+"\" class=\"ui rounded image centered\" width=\"150\" height=\"150\"/>\n" +
                        "                        </a>\n" +
                        "                    </div>\n" +
                        "                </div>\n" +
                        "            </div>");
                }
                mainDiv.append("<div class=\"ui bottom attached segment\">\n" +
                    "                <div class=\"ui two column grid\">\n" +
                    "                    <div class=\"column\">\n" +
                    "                        <button onclick='flush(1,null)' href=\"#\" class=\"ui button\">上一页</button>\n" +
                    "                    </div>\n" +
                    "                    <div class=\"right aligned column\">\n" +
                    "                        <button onclick='flush(2,null)' class=\"ui button\">下一页</button>\n" +
                    "                    </div>\n" +
                    "                </div>\n" +
                    "\n" +
                    "            </div>");
                getPageInfo(next,typeId);
            }
        });
    }

    function listTypeInfo(next, typeId) {
        $.ajax({
            url: "/getTypeList",
            type: "get",
            success: function (resp) {
                if (resp.code === 0) {
                    return;
                }
                typeList = resp.data;
                mainDiv.empty();
                let mainDivHead = "<div class=\"ui top attached segment\">"+
                "<button onclick='flush(0,0)' class=\"ui teal basic button\">全部</button>";
                for (let type of typeList) {
                    mainDivHead+="<button onclick='flush(0,"+ type.id +")' class=\"ui teal basic button\">"+type.name+"</button>";
                }
                mainDivHead+="</div>";
                mainDiv.append(mainDivHead);
                listBlogInType(currentPage,next,typeId);
            }
        });
    }

    function flush(next, typeId){
        if (typeId != null && typeId > 0){
            typeIdPage = typeId;
        }else if (typeId === 0) {
            typeIdPage = null;
        }
        listTypeInfo(next, typeIdPage);
    }

    flush(0,null);

</script>






</html>